$baseFontSize : 20px !default;
$red : #D71345 !default;
$opacity: 1 !default;
@function rem($px) {
  @return $px / $baseFontSize * 1rem;
}
@mixin displayflex{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin flex($size:1){
  -webkit-box-flex:$size;
  -moz-box-flex:$size;
  -webkit-flex:$size;
  -ms-flex:$size;
  flex:$size;
}
@mixin flexflowCol($direction:column,$dir:vertical){
  -webkit-box-orient:$dir;
  -ms-box-orient: $dir;
  -moz-box-orient: $dir;
  -webkit-flex-flow:$direction nowrap;
  -ms-flex-flow:$direction nowrap;
  -moz-flex-flow:$direction nowrap;
  flex-flow:$direction nowrap;
}
@mixin flexflowRow($direction:row,$dir:horizontal) {
  -webkit-box-orient:$dir;
  -ms-box-orient: $dir;
  -moz-box-orient: $dir;
  -webkit-flex-flow:$direction nowrap;
  -ms-flex-flow:$direction nowrap;
  -moz-flex-flow:$direction nowrap;
  flex-flow:$direction nowrap;
}
@mixin shadow($x:0,$y:0px,$z:5px,$color:#bdbdbd) {
  box-shadow : $x $y $z $color;
  -webkit-box-shadow:  $x $y $z $color;
  -moz-box-shadow:  $x $y $z $color;
}
*{
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color:rgba(255,255,255,0);
  font-family: Helvetica, sans-serif;
  -webkit-touch-callout: none;
  box-sizing: border-box;
}
a:active,a:hover,a:link,a:visited{
  text-decoration: none;
  outline: none;
}
html,body{
  width: 100%;
  height: 100%;
  font-size: 20px;
}
html {
  font-size: 20px;
}
* {
  box-sizing: border-box;
  outline: none;
}

/*以下定义动画帧*/
@-webkit-keyframes glow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes glow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes glow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes glow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes glow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@mixin linear-gradient-red() {
  background-image: -webkit-linear-gradient(top,
          #f84458 0%,
          #fa465c 100%
  );
  background-image: -moz-linear-gradient(top,
          #f84458 0%,
          #fa465c 100%
  );
  background-image: -o-linear-gradient(top,
          #f84458 0%,
          #fa465c 100%
  );
  background-image: -ms-linear-gradient(top,
          #f84458 0%,
          #fa465c 100%
  ); /* IE10+ */
  background-image: linear-gradient(top,
          #f84458 0%,
          #fa465c 100%
  ); /* W3C */
}
@mixin linear-gradient-yellow() {
  background-image: -webkit-linear-gradient(top,
          #fcb56c 0%,
          #fa9365 100%
  );
  background-image: -moz-linear-gradient(top,
          #fcb56c 0%,
          #fa9365 100%
  );
  background-image: -o-linear-gradient(top,
          #fcb56c 0%,
          #fa9365 100%
  );
  background-image: -ms-linear-gradient(top,
          #fcb56c 0%,
          #fa9365 100%
  ); /* IE10+ */
  background-image: linear-gradient(top,
          #fcb56c 0%,
          #fa9365 100%
  ); /* W3C */
}
@mixin linear-gradient-green() {
  background-image: -webkit-linear-gradient(top,
          #c7f6b0 0%,
          #9af7cd 100%
  );
  background-image: -moz-linear-gradient(top,
          #c7f6b0 0%,
          #9af7cd 100%
  );
  background-image: -o-linear-gradient(top,
          #c7f6b0 0%,
          #9af7cd 100%
  );
  background-image: -ms-linear-gradient(top,
          #c7f6b0 0%,
          #9af7cd 100%
  ); /* IE10+ */
  background-image: linear-gradient(top,
          #c7f6b0 0%,
          #9af7cd 100%
  ); /* W3C */
}
@mixin linear-gradient-blue() {
  background-image: -webkit-linear-gradient(top,
          #b9f5f3 0%,
          #8bd5f7 100%
  );
  background-image: -moz-linear-gradient(top,
          #b9f5f3 0%,
          #8bd5f7 100%
  );
  background-image: -o-linear-gradient(top,
          #b9f5f3 0%,
          #8bd5f7 100%
  );
  background-image: -ms-linear-gradient(top,
          #b9f5f3 0%,
          #8bd5f7 100%
  ); /* IE10+ */
  background-image: linear-gradient(top,
          #b9f5f3 0%,
          #8bd5f7 100%
  ); /* W3C */
}
@mixin border-radius($radius:4px){
  -webkit-border-radius: rem($radius);
  -moz-border-radius: rem($radius);
  -ms-border-radius: rem($radius);
  -o-border-radius: rem($radius);
  border-radius: rem($radius);
}

html,body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

img {
  width: 100%;
  border: none;
  vertical-align: middle;
  display: block;
}
.screen-wrap{
  width: 100%;
  height: 100%;
  transition: transform 500ms ease-in-out;
  -moz-transition: -moz-transform 500ms ease-in-out;/* Firefox 4 */
  -webkit-transition: -webkit-transform 500ms ease-in-out; /* Safari 和 Chrome */
  -o-transition: -o-transform 500ms ease-in-out;/* Opera */
  -ms-transition: -ms-transform 500ms ease-in-out;/* IE 9 */
}
.one-page,.two-page,.three-page,.four-page{
  width: 100%;
  min-height: 100%;
  height: auto;
  position: relative;
  .main{
    width: 100%;
    height: 100%;
    overflow: hidden;
    .download-wrap{
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1000;
      a{
        width: rem(200px);
        height: rem(45px);
        line-height: rem(45px);
        @include border-radius(4px);
        background-color: #fff;
        display: block;
        text-align: center;
        color: #e61e4a;
        margin: 0 auto;
        font-size: rem(18px);
        box-shadow: 0 0 10px rgba(230,30,74,0.5);
      }
      .text{
        color: #fff;
        text-align: center;
        font-size: rem(14px);
        padding: rem(15px) rem(10px);
      }
      .downArrow{
        width: rem(25px);
        height: rem(14px);
        margin: 0 auto rem(13px);
        background: url(/old/images/AppDownload/downArrow.png) no-repeat center;
        background-size: cover;
        -webkit-animation: glow  1000ms ease-out infinite alternate;
        -moz-animation: glow 1000ms ease-out infinite alternate;
        -o-animation: glow  1000ms ease-out infinite alternate;
        -ms-animation: glow  1000ms ease-out infinite alternate;
        animation: glow 1000ms ease-out infinite alternate;
      }
    }
  }
}
.one-page{
  @include linear-gradient-red();
  .main{
    .up {
      width: 100%;
      text-align: center;
      position: relative;
      img.logo{
        width: 100%;
        min-height: rem(253px);
        display: inline-block;
      }
      .copy{
        color: #fff;
        text-align: center;
        font-size: rem(14px);
        padding-top: rem(18px);
        background-color: transparent;
        position: absolute;
        left:0;
        right: 0;
        bottom: rem(90px);
      }
    }
    .down{
      height: 65%;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: hidden;
      z-index: 200;
    }
  }
}
.two-page,.three-page,.four-page{
  .main{
    .up {
      width: 100%;
      padding: 10.5% 0;
      text-align: center;
      .slogan{
        color: #774e25;
        font-size: rem(26px);
        line-height: rem(30px);
      }
      .copy{
        color: #774e25;
        text-align: center;
        font-size: rem(14px);
        line-height: rem(20px);
      }
      .pb18{
        padding-top: rem(18px);
      }
    }
    .down{
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: hidden;
      z-index: 200;
    }
    .sample{
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      top: 19%;
      overflow: hidden;
      img{
        width: rem(200px);
        margin: 0 auto;
      }
    }
    .download-wrap{
      a{
        background-color: #e61e4a;
        color: #fff;
        margin-bottom: rem(14px);
      }
    }
  }
}
.two-page{
  @include linear-gradient-yellow();
  .main{
    .up {
      .slogan{
        color: #774e25;
      }
      .copy{
        color: #774e25;
      }
    }
  }
}
.three-page{
  @include linear-gradient-green();
  .main{
    .up {
      .slogan{
        color: #2d5f35;
      }
      .copy{
        color: #2d5f35;
      }
    }
  }
}
.four-page{
  @include linear-gradient-blue();
  .main{
    .up {
      .slogan{
        color: #2d505f;
      }
      .copy{
        color: #2d505f;
      }
    }
    .sample{
      img{
        width: rem(274px);
        padding-left: rem(33px);
        margin: 0 auto;
      }
    }
    .download-wrap{
     margin-bottom: rem(18px);
    }
  }
}